<template>
  <div>
    <div v-if="divBlock === true"  class="content" >
      <!--    头部 标题-->
      <van-sticky class="header" :offset-top="0">
        <van-nav-bar
          title=""
        >
          <template #left>
            <div @click="onClickLeft" class="fanhui">
              <img src="../../assets/返回.png" alt="">
              <span class="sides">返回</span>
            </div>
          </template>
          <template #right>
            <span v-if="show == 1" class="erweima" @click="erWeiMa()">我的二维码</span>
            <span v-else></span>
          </template>
        </van-nav-bar>
      </van-sticky>
      <div  class="personalInf">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="个人基本信息" name="1">
            <div class="personalInf_content">
              <ul v-for="(item,index) in formItemList" :key="index">
                <li>
                  <a class="leftText">头像</a>
                  <van-image
                    round
                    width="13vw"
                    height="13vw"
                    :src="item.PHOTO"
                    fit="cover"
                  />
<!--                  <img class="personalInf_img " src="../assets/nan.png" v-show="item.sex=== '1'" alt="">-->
<!--                  <img class="personalInf_img " src="../assets/nv.png" v-show="item.sex=== '2'" alt="">-->
                </li>
                <li>
                  <a class="leftText">姓名</a>
                  <a class="rightText">{{item.name}}</a>
                </li>
                <li>
                  <a class="leftText">性别</a>
                  <a class="rightText">
                    <span v-if="item.sex == 1">男</span>
                    <span v-else-if="item.sex == 2">女</span>
                  </a>
                </li>
                <li>
                  <a class="leftText">年龄</a>
                  <a class="rightText">{{(item.age)}}</a>
                </li>
                <li>
                  <a class="leftText">出生日期</a>
                  <a class="rightText">{{item.birthday.split(' ')[0]}}</a>
                </li>
                <li>
                  <a class="leftText">家庭住址</a>
                  <a class="rightText">{{item.address}} {{item.xiangxiaddress}}</a>
                </li>
                <li>
                  <a class="leftText">联系电话</a>
                  <a class="rightText">{{item.phone}}</a>
                </li>
                <li>
                  <a class="leftText">紧急联系人</a>
                  <a class="rightText">{{item.emergencycontact}}</a>
                </li>
                <li>
                  <a class="leftText">紧急联系人电话</a>
                  <a class="rightText">{{item.emergencycontactphone}}</a>
                </li>
                <li>
                  <a class="leftText">家庭医生</a>
                  <a class="rightText">{{item.familydoctor}}</a>
                </li>
                <li>
                  <a class="leftText">身体状况</a>
                  <a class="rightText">{{item.physicalcondition}}</a>
                </li>
                <li>
                  <a class="leftText">睡眠质量</a>
                  <a class="rightText">{{item.sleep}}</a>
                </li>
                <li>
                  <a class="leftText">居住环境</a>
                  <a class="rightText">{{item.livingenvironment}}</a>
                </li>
                <li>
                  <a class="leftText">活动情况</a>
                  <a class="rightText">{{item.activity}}</a>
                </li>
                <li>
                  <a class="leftText">饮食习惯</a>
                  <a class="rightText">{{item.eatinghabits}}</a>
                </li>
              </ul>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="tableInf">
        <div class="tabHeader" ref="tab" style="">
          <div>
            <a class="header_text">康复情况:
            </a>
            <!--康复信息按钮-->
            <span class="spanDiv">
              <input type="button" v-for="(btnItem, btnIndex) in btnList"
                   :key="btnIndex" :value="btnItem" class="btn"
                   @click="btnChange(btnIndex)" :class="{'cur': btnIndex === msg}">
            </span>
          </div>
          <div  v-if="msg===4" style="background: #fff;">
            <a class="header_text">日期选择:</a>
            <span class="spanDiv">
            <input type="button"
                   class="btn"
                   v-for="(item, index) in dayList"
                   :key="index"
                   :value="item"
                   @click="changeTab(index)"
                   :class="{'cur': index === dayIndex}">
          </span>
          </div>
        </div>
        <div class="tab1" v-if="msg===0 && PingGUList.length>0">
          <div class="tab" v-for="(item, index) in PingGUList" :key="index">
            <ul>
              <li class="flLeft">
                <a v-for="(t, index) in tabTitle0" :key="index">{{t}}:</a>
              </li>
              <li class="flRight">
                <a>{{item.pdbmc}}</a>
                <a>{{item.kdrq}}</a>
                <a>{{item.pdrq}}</a>
                <a>{{item.pdry}}</a>
                <a>{{item.pdfs}}</a>
                <a>{{item.psjg}}</a>
                <!--                <a v-if="item.tjbz==0" class="red">未评估</a>-->
                <!--                <a v-else-if="item.tjbz==1">已评估</a>-->
              </li>
            </ul>
          </div>
        </div>
        <div class="tab1" v-else-if="msg===1">
          <div class="tab" v-for="(item, index) in selfList" :key="index">
            <ul>
              <li class="flLeft">
                <a v-for="(t, index) in selfTab" :key="index">{{t}}:</a>
              </li>
              <li class="flRight">
                <a>{{item.ASSESS_NAME}}</a>
                <a>{{formatDate(new Date(item.CREATED_AT))}}</a>
                <a>{{item.ALL_POINTS}}</a>
                <a>{{item.RESULT}}</a>
                <!--                <a v-if="item.tjbz==0" class="red">未评估</a>-->
                <!--                <a v-else-if="item.tjbz==1">已评估</a>-->
              </li>
            </ul>
          </div>
        </div>
        <div class="tab1" v-else-if="msg===2 && ZhiliaoList.length>0">
          <div class="tab" v-for="(item, index) in ZhiliaoList" :key="index">
            <ul>
              <li class="flLeft">
                <a v-for="(t, index) in tabTitle1" :key="index">{{t}}:</a>
              </li>
              <li class="flRight">
                <a>{{item.xmmc}}</a>
                <a>{{item.hylx}}</a>
                <a>{{item.zxrq_yy}}</a>
                <a>{{item.yysjd}}</a>
                <a>{{item.zxrq}}</a>
                <a>{{item.jfsl}}</a>
                <a>嘱托</a>
                <a v-if="item.zxbz==0" class="red">未执行</a>
                <a v-else-if="item.zxbz==1">已执行</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="tab1" v-else-if="msg===3 && HuLiList.length>0">
          <div class="tab" v-for="(item, index) in HuLiList" :key="index">
            <ul>
              <li class="flLeft">
                <a v-for="(t, index) in tabTitle2" :key="index">{{t}}:</a>
              </li>
              <li class="flRight">
                <a class="textLfet">{{item.xmmc}}</a>
                <a>{{item.zxry}}</a>
                <a>{{item.zxrq}}</a>
                <a>{{item.yzzt}}</a>
                <a v-if="item.wcbz==0" class="red">未完成</a>
                <a v-else-if="item.wcbz==1">已完成</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="tab1" v-else-if="msg===4 && tableList.length>0">
          <div style="height: auto;background: white;padding: 2vh 0">
            <table class="table" cellpadding="0" cellspacing="0" border="0">
              <thead>
              <tr>
                <td>日期</td>
                <td>详情</td>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item, index) in tableList" :key="index">
                <td>{{item.days}}</td>
                <td style="color: #1da4f2;" @click="xiangqing(item.days)">详情</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else class="tab1" style="height: 50vh;display: flex;align-items: center;justify-content: center;color: #666">暂无更多信息</div>
      </div>
    </div>
    <div v-else-if="divBlock === false" style="width: 100%;height: 100%;font-size: 20px;display: flex;align-items: center;justify-content: center">页面失效</div>
  </div>
</template>

<script>
// import axios from 'axios'
import $ from 'jquery'
import ImgHttp from '../../http/video.http'
export default {
  name: 'Persons',
  data () {
    return {
      activeNames: ['0'],
      divBlock: true,
      active: 1,
      msg: 0,
      PingGUList: [],
      selfList: [],
      ZhiliaoList: [],
      HuLiList: [],
      titleList: ['头像', '姓名', '性别', '年龄', '出生日期', '家庭住址',
        '联系电话', '紧急联系人', '紧急联系人电话', '家庭医生', '身体状况',
        '睡眠质量', '居住环境', '活动情况'],
      selfTab: ['评定量表名', '评定日期', '评定总分', '评定结果'],
      // 个人基本信息
      formItemList: [],
      // 表格表头
      tabTitle0: ['评定量表名', '开立日期', '评定日期', '评定人员', '评定总分', '评定结果', '评定状态'],
      tabTitle1: ['康复项目', '治疗资源', '预约日期', '预约时间', '治疗时间', '数量', '嘱托', '执行状态'],
      tabTitle2: ['护理项目', '护理人员', '护理时间', '嘱托', '护理状态'],
      userid: '',
      mzhm: '',
      btnList: ['评估信息', '自我评估', '治疗信息', '护理信息', '健康数据采集'],
      dayList: ['7天之内', '15天之内', '全部'],
      tableList: [],
      dayIndex: 0,
      time: '',
      show: ''
    }
  },
  mounted () {
    // 从网址上截取 userid 后面的值
    this.userid = this.$utils.getUrlKey('userid')
    this.mzhm = this.$utils.getUrlKey('mzhm')
    this.show = this.$utils.getUrlKey('show')
    this.getPingGu(this.mzhm)
    this.getZhiliao(this.mzhm)
    this.getHuLi(this.mzhm)
    window.addEventListener('scroll', this.handleScroll, true)
    this.getPeople()
    this.btnChange(0)
    // console.log($(window).height() - )
    // $('.tab1').css('height', )
    // 判断是否定时
    if (this.$utils.getUrlKey('time') !== null) {
      var dateTime = Number(this.$utils.getUrlKey('time'))
      this.time = new Date(dateTime)
      if (Math.abs(new Date() - this.time) / 1000 / 60 > 15) {
        this.divBlock = false
      } else {
        this.divBlock = true
      }
    } else {
      this.divBlock = true
    }
  },
  methods: {
    getPeople () {
      this.$http.findPersonal({})
        .then(res => {
          console.log(res)
          var url
          if (res.data.PHOTO.substring(0, 4) === 'http') {
            url = res.data.PHOTO
          } else {
            url = ImgHttp.imgHttp + res.data.PHOTO
          }
          var obj = {
            PHOTO: url,
            phone: res.data.phone,
            age: res.data.age,
            birthday: res.data.birthday,
            name: res.data.name,
            sex: res.data.sex,
            activity: res.data.activity,
            address: res.data.address + res.data.xiangxiaddress,
            eatinghabits: res.data.eatinghabits,
            emergencycontact: res.data.emergencycontact,
            emergencycontactphone: res.data.emergencycontactphone,
            familydoctor: res.data.familydoctor,
            livingenvironment: res.data.livingenvironment,
            physicalcondition: res.data.physicalcondition,
            sleep: res.data.sleep
          }
          this.formItemList.push(obj)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击我的二维码跳转
    erWeiMa () {
      this.$router.push({path: '/qrcode', query: {userid: this.userid, mzhm: this.mzhm}})
    },
    // 返回
    onClickLeft () {
      window.history.go(-1)
      // 移除滚动事件
      window.removeEventListener('scroll', this.handleScroll, true)
      $('.tabHeader').removeClass('gu')
    },
    // 获取 几天 内的数据
    getHealth (n) {
      // axios.get('http://jmx-kfdj.com/kfhl/healthdata/findHealthdataByTimeFenZu', {params: {userid: this.userid, n: n}})
      this.$http.findHealthdataByTimeFenZu({userid: this.userid, n: n})
        .then(res => {
          console.log(res)
          this.tableList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 康复情况 按钮切换事件
    btnChange (index) {
      this.msg = index
      this.changeTab(this.dayIndex)
      if (index === 1) {
        this.getData()
      }
    },
    block () {
      window.history.go(-1)
    },
    // 日期选择 切换按钮事件
    changeTab (index) {
      this.dayIndex = index
      if (index === 0) {
        this.getHealth(7)
      } else if (index === 1) {
        this.getHealth(15)
      } else if (index === 2) {
        this.getHealth('')
      }
    },
    // 康复评估表
    getPingGu (mzhm) {
      // axios.post('http://jmx-kfdj.com/hisdemo/PingGu?mzhm=' + mzhm + '&pageSize=')
      this.$http.PingGu({mzhm: mzhm, pageSize: ''})
        .then(res => {
          // console.log(res)
          // 删除最后一条数据
          res.data.splice(-1)
          this.PingGUList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 康复治疗表
    getZhiliao (mzhm) {
      // axios.get('http://jmx-kfdj.com/hisdemo/zhiliao?mzhm=' + mzhm + '&pageSize=')
      this.$http.zhiliao({mzhm: mzhm, pageSize: ''})
        .then(res => {
          // 删除最后一条数据
          res.data.splice(-1)
          this.ZhiliaoList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 康复护理表
    getHuLi (mzhm) {
      // axios.get('http://jmx-kfdj.com/hisdemo/HuLi?mzhm=' + mzhm + '&pageSize=')
      this.$http.HuLi({mzhm: mzhm, pageSize: ''})
        .then(res => {
          // 删除最后一条数据
          res.data.splice(-1)
          this.HuLiList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击详情
    xiangqing (time) {
      this.$router.push({path: '/infoHealth', query: {'userid': this.userid, 'time': time}})
    },
    handleScroll () {
      if (this.active === 1) {
        let scrollTop = $('.tableInf').offset().top
        if (scrollTop < 10) {
          $('.tabHeader').addClass('gu')
        } else {
          $('.tabHeader').removeClass('gu')
        }
      } else {
        // 移除滚动事件
        window.removeEventListener('scroll', this.handleScroll, true)
        $('.tabHeader').removeClass('gu')
      }
    },
    // 转换时间
    formatDate (date, today) {
      var YY = date.getFullYear()
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      if (today === 1) {
        return YY + '/' + MM + '/' + DD
      } else {
        return YY + '-' + MM + '-' + DD
      }
    },
    // 获取我的评估列表 http://jmx-kfdj.com/kfhl/miniassess/getMySubjects
    getData () {
      this.$http.getMyAssess({
        ASSESS_NAME: '',
        ACCEPT_USER_ID: this.userid,
        TYPE: 1,
        OP_NAME: '',
        DIS_ID: '',
        startTime: '',
        endTime: ''
      })
        // axios.get('http://jmx-kfdj.com/kfhl/miniassess/getMySubjects', {params:
        //     {USER_ID: userid, name: name, startTime: startTime, endTime: endTime}})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.selfList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  destroyed () {
    // 移除滚动事件
    window.removeEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  /deep/ .van-cell__title {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
    border-left: 2px solid #1DA4F2;
    padding-left: 5px;
    height: 4vw;
    color: #1da4f2;
    display: flex;align-items: center;
  }
/deep/ .van-cell--clickable{
  display: flex;
  align-items: center;
}
  .all {
    width: 100vw;
    height: 100vh;
    background: rgba(241, 245, 247, 1);
  }
  .spanDiv::-webkit-scrollbar{
    display: none;
  }
  .spanDiv{
    overflow-x: scroll;
    width: 70vw;
    display: inline-flex;
  }
  .gu {
    width: 100%;
    position: fixed;
    /*position: sticky;*/
    top: 12vw;
  }

  .Header {
    width: 100%;
    height: 11vw;
    font-size: 4vw;
    position: sticky;
    background: white;
    display: flex;
    align-items: center;
    /*background: linear-gradient(-18deg, rgba(29, 163, 241, 1), rgba(29, 199, 241, 1));*/
  }
  .Header img {
    width: 11vw;
    margin-left: 4vw;
  }

  .content {
    height: 100vh;
    overflow: scroll;
    background: rgba(241, 245, 247, 1);
  }
  .fanhui{
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .erweima{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .center {
    display: inline-block;
    width: 90%;
    text-align: center;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
  }
  /*个人基本信息*/
  .personalInf {
    width: 100%;
    margin-bottom: 3vw;
  }

  .headerText {
    width: 100%;
    height: 11vw;
    font-size: 4vw;
    line-height: 11vw;
    background-color: #fff;
    margin-bottom: 0.3vw;
  }
  .tab1{
    height:50vh;
  }
  .header_text {
    height: 4vw;
    padding-left: 2vw;
    border-left: 2px solid #1da4f2;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1da4f2;
    font-size: 15px;
    margin-left: 16px;
    display: flex;
    align-items: center;
  }

  .personalInf_content {
    width: 100%;
    background-color: #ffffff;
  }

  .personalInf_content ul li:nth-child(1) {
    height: 14vw;
  }
/deep/ .van-collapse-item__content{
  padding: 0 16px;
}
  .personalInf_content ul li {
    width: 100%;
    height: 11vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebedf0;
  }
  .personalInf_content ul li:last-child{
    border-bottom: none;
  }
  .personalInf_content ul li a {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .personalInf_content ul li a:nth-child(2) {
    color: #999;
  }

  .personalInf_img {
    width: 13vw;
    height: 13vw;
  }

  .leftText {
    width: 40%;
    /*padding-left: 7vw;*/
  }

  .rightText {
    width: 60%;
    /*padding-right: 4vw;*/
    display: flex;
    flex-direction: row-reverse;
  }

  /*  表格*/
  /* .tableInf {

  } */

  .tabHeader {
    font-size: 15px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .tabHeader a{
    /*height: 24px;*/
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .tabHeader div{
    width: 100%;
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #ededed;
    /*margin-top: 3vw;*/
  }
  .btn {
    background: #F4F8F9;
    border-radius: 22px;
    line-height: 22px;
    border: none;
    font-size: 15px;
    margin-left: 2vw;
    padding: 2px 10px;
}

/*点击的切换*/
  .cur {
    color: #fff;
    background-color: #1da4f2;
  }
/deep/ .van-hairline--bottom::after{
  border: none;
}
  .tab {
    height: auto;
    /*overflow: scroll;*/
    background-color: white;
    margin-bottom: 0.5vw;
  }

  .tab ul {
    display: flex;
    list-style: none;
    font-size: 3.5vw;
    padding: 3vw 0;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .tab ul li a {
    font-family: PingFang SC;
    font-weight: 500;
    height: 6.5vw;
    /*line-height: 6.5vw;*/
  }

  .flLeft {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 25%;
    padding-left: 5vw;
    /*background-color: red;*/
  }

  .flRight {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 68%;
    /*background-color: aqua;*/
  }

  .red {
    color: rgba(211, 47, 47, 1);
  }
  .table{
    width: 100%;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    table-layout: fixed;
  }
  .table thead tr{
    background: #1da4f2;
    /*height: 11vw;*/
    color: #fff;
    /*font-size: 14px;*/
    height: 44px;
  }
  .table tbody tr{
    /*height: 18vw;*/
    height: 44px;
    /*font-size: 12px;*/
  }
  .table tbody tr td:nth-child(1){
    box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  }
  .table tbody tr td:nth-child(2){
    box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  }
</style>
